import { defineComponent, h, mergeProps } from 'vue';
import { addPrefixZero } from '../helpers';

export default defineComponent({
  name: 'ListItem',
  props: {
    flightNumber: {
      type: String,
      default: '',
    },
    departure: {
      type: String,
      default: '',
    },
    destination: {
      type: String,
      default: '',
    },
    arrivalTime: {
      type: String,
      default: '',
    },
    type: {
      type: String,
      default: 'PAX'
    },
    backgroundClass: Boolean,
  },
  methods: {
    transferDateTime(timeStr: string) {
      
      const month = timeStr.substr(4, 2),
        day = timeStr.substr(6, 2),
        hour =  timeStr.substr(8, 2),
        minutes =  timeStr.substr(10, 2);

      return `${month}/${day} ${hour}:${minutes}`;
    },
  },
  render() {
    return [
      h(
        'div',
        mergeProps(
          {
            class: 'f-list--item light-cyan--text',
          },
          {
            class: {
              'f-list--even-row': this.backgroundClass,
            },
          }
        ),
        this.flightNumber
      ),
      h(
        'div',
        mergeProps(
          {
            class: 'f-list--item',
          },
          {
            class: {
              'f-list--even-row': this.backgroundClass,
            },
          }
        ),
        this.departure
      ),
      h(
        'div',
        mergeProps(
          {
            class: 'f-list--item',
          },
          {
            class: {
              'f-list--even-row': this.backgroundClass,
            },
          }
        ),
        this.destination
      ),
      h(
        'div',
        mergeProps(
          {
            class: 'f-list--item',
          },
          {
            class: {
              'f-list--even-row': this.backgroundClass,
            },
          }
        ),
        this.transferDateTime(this.arrivalTime)
      ),
      h(
        'div',
        mergeProps(
          {
            class: 'f-list--item',
          },
          {
            class: {
              'f-list--even-row': this.backgroundClass,
            },
          }
        ),
        this.type === 'PAX' ? '客机': '货机'
      ),
    ];
  },
});
